<script setup>
import { onMounted, nextTick, ref, reactive } from 'vue';
import { addListForm, editListForm, listFormDetail } from '@/api/workflow/form.js';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const vfdRef = ref(null);

// 构建配置
const buildForm = reactive({
  config: {
    languageMenu: false,
    externalLink: false,
    formTemplates: false,
    exportCodeButton: false,
    generateSFCButton: false,
    toolbarMaxWidth: 360
  }
});

// 表单提交
const formRef = ref(null);
const formOpen = ref(false);
const formTitle = ref('');
const rules = ref({
  formName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }]
});
const form = ref({
  formId: null,
  formName: null,
  content: null,
  remark: null
});

onMounted(() => {
  const formId = route.query && route.query.formId;
  if (formId) {
    listFormDetail(formId).then(res => {
      const content = JSON.parse(res.data.content);
      nextTick(() => {
        // 加载表单json数据
        vfdRef.value.setFormJson(content);
      });
      form.value = res.data;
    });
  } else {
    nextTick(() => {
      // 加载表单json数据
      vfdRef.value.setFormJson({
        widgetList: [],
        formConfig: {
          modelName: 'formData',
          refName: 'vForm',
          rulesName: 'rules',
          // labelWidth: 80,
          labelPosition: 'left',
          size: '',
          labelAlign: 'label-left-align',
          cssCode: '',
          customClass: '',
          functions: '',
          layoutType: 'PC',
          onFormCreated: '',
          onFormMounted: '',
          onFormDataChange: '',
          onFormValidate: ''
        }
      });
    });
  }
});

const saveFormJson = () => {
  let formJson = vfdRef.value.getFormJson();
  form.value.content = JSON.stringify(formJson);
  formOpen.value = true;
};

/** 提交按钮 */
const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      if (form.value.formId != null) {
        editListForm(form.value).then(() => {
          ElMessage.success('修改成功');
          formOpen.value = false;
        });
      } else {
        addListForm(form.value).then(() => {
          ElMessage.success('新增成功');
          formOpen.value = false;
        });
      }
      router.back();
    }
  });
};

// 取消按钮
const cancel = () => {
  formOpen.value = false;
};
</script>

<template>
  <v-form-designer ref="vfdRef" :designer-config="buildForm.config">
    <template #customToolButtons>
      <el-button type="text" @click="saveFormJson">保存</el-button>
    </template>
  </v-form-designer>

  <!-- 提交表单 -->
  <el-dialog v-model="formOpen" :title="formTitle" append-to-body width="500px">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="表单名称" prop="formName">
        <el-input v-model="form.formName" placeholder="请输入表单名称" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
::v-deep(.main-header) {
  display: none;
}

.dialog-footer {
  text-align: right;
}
</style>
